<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { Menu } from './Menu'
import { useMenuTree } from './useMenuTree'

const { menuTree } = useMenuTree()

const router = useRouter()
async function handleMenuClick(name: string) {
  await router.push({ name })
}
</script>

<template>
  <a-menu
    class="select-none overflow-hidden"
    style="width: 240px"
    :default-selected-keys="[$route.name]"
    show-collapse-button
    breakpoint="xl"
    @menu-item-click="handleMenuClick"
  >
    <Menu :menuTree="menuTree" />
  </a-menu>
</template>

<style scoped>
/** webkit 菜单栏溢出滚动条样式 */
:deep(.arco-menu-inner) {
  --uno: scrollbar-slim;
}
</style>
